<template>
  <el-container>
    <el-container>
      <el-main>
        <el-row class="function-button" style="margin-bottom: 20px">
          <el-button type="success" size="small" round @click="refresh()"
            >刷新按钮</el-button
          >

          <el-collapse accordion class="accordion">
            <el-collapse-item>
              <template slot="title">
                筛选<i class="header-icon el-icon-info"></i>
              </template>
              <div>
                <el-button
                  class="queryBtn"
                  round
                  type="success"
                  style="margin-left: 10px"
                  @click="queryByCondition"
                  >查询</el-button
                >
                <el-button
                  class="queryBtn"
                  round
                  style="margin-left: 10px"
                  type="warning"
                  @click="resetQueryParams"
                  >重置</el-button
                >
              </div>
              <el-row>
                <el-col :span="12">
                  <el-date-picker
                    type="datetimerange"
                    v-model="queryParam.createTime"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="创建日期起始"
                    end-placeholder="创建日期截止"
                    align="right"
                    :default-time="['00:00:00', '23:59:59']"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  >
                  </el-date-picker
                ></el-col>
                <el-col :span="12">
                  <el-date-picker
                    type="datetimerange"
                    v-model="queryParam.employTime"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="录用日期起始"
                    end-placeholder="录用日期截止"
                    align="right"
                    :default-time="['00:00:00', '23:59:59']"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  >
                  </el-date-picker
                ></el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-row>
        <template>
          <el-table
            ref="resumeDeliveryable"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            v-loading="loading"
            :data="companyEmployList"
            fit
            border
            max-height="700"
            size="medium "
            highlight-current-row
            row-key="id"
            @cell-click="handleCellClick"
            tooltip-effect="dark"
          >
            <el-table-column prop="id" label="编号" width="100">
            </el-table-column>
            <el-table-column prop="resumeId" label="简历编号">
            </el-table-column>
            <el-table-column prop="jobName" label="岗位名称" width="150">
              <template slot-scope="scope">
                <span class="span-a">{{ scope.row.jobName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="studentName" label="学生名称" width="150">
              <template slot-scope="scope">
                <span class="span-a">{{ scope.row.studentName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="companyName" label="公司名称" width="150">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
              <template slot-scope="scope">
                {{ scope.row.createTime | dateFMT }}
              </template>
            </el-table-column>
            <el-table-column prop="state" label="状态">
              <template slot-scope="scope">
                <el-tag :type="scope.row.state === 0 ? 'warning' : 'success'">
                  {{ scope.row.state === 0 ? '待面试' : '已录用' }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="employTime" label="录用时间">
              <template
                slot-scope="scope"
                v-if="scope.row.employTime ? true : false"
              >
                {{ scope.row.employTime | dateFMT('YYYY-MM-DD HH::ss') }}
              </template>
            </el-table-column>
            <el-table-column prop="salary" label="录用薪资">
              <template
                slot-scope="scope"
                v-if="scope.row.salary ? true : false"
              >
                {{ scope.row.salary }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  @click.stop="handleOffer(scope.row)"
                  size="small"
                  >录用</el-button
                >
                <el-button
                  type="danger"
                  @click.stop="handDel(scope.row)"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import throttle from 'lodash/throttle'; //
import { mapGetters } from 'vuex';
import { reqQueryJobInfoById } from '../CompanyMng/api/PostPostingApi';
import {
  reqEditCompanyEmploy,
  reqGetCompanyEmployList,
  reqBatchDelCompanyEmploy,
} from './api/companyEmployApi';
export default {
  name: 'CompanyEmploy',
  data() {
    return {
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      queryParam: {},
      jobInfo: {},
      companyEmployList: [],
      companyEmployRecordIPage: {},
      condition: {
        loginId: this.$store.state.user.loginId, // 登录用户id
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
    };
  },
  computed: {
    // 用户
    ...mapGetters(['name', 'description', 'loginId']),
  },
  watch: {
    companyEmployRecordIPage() {},
  },
  mounted() {
    this.getCompanyEmployList();
  },
  methods: {
    // 重置查询参数
    resetQueryParams() {
      this.queryParam = {};
    },

    // 根据岗位id查询岗位信息
    async getJobByJobId(jobId) {
      return await reqQueryJobInfoById(jobId);
    },
    // 根据id来查询简历信息
    getResumeById(resumeId) {
      return this.$store.dispatch('ResumeMng/getResumeById', resumeId);
    },
    async handleEdit(row) {
      return await reqEditCompanyEmploy(row);
    },
    // 点击查看
    async handleOffer(row) {
      // 更新state记录
      row.state = 1;
      let result = await this.getJobByJobId(row.jobId);
      row.salary = result.data.jobInfo.monthSalary;
      this.handleEdit(row).then((res) => {
        this.$message.success(res.message);
        // 更新列表
        this.getCompanyEmployList();
      });
    },
    // 单击表格的某个单元格
    handleCellClick(row, column, cell, event) {
      if (column.label === '岗位名称') {
        this.getJobByJobId(row.jobId).then((res) => {
          this.jobInfo = res.data.jobInfo;
          // 城市字段回显映射
          let cityIds = res.data.jobInfo.workAddressId.split('-');
          this.jobInfo.addressId = cityIds;
          this.jobInfo.name = Number(this.jobInfo.name);
          // 路由跳转 -- 展示岗位信息
          this.$router.push({
            name: 'jobShowPage',
            params: {
              jobForm: this.jobInfo,
            },
          });
        });
      }
      if (column.label === '学生名称') {
        // 查看该学生的简历
        this.getResumeById(row.resumeId).then((res) => {
          // 跳转值学生简历预览界面
          this.$router.push({
            name: 'resumetemplate',
            params: {
              resumeRowInfo: res.data.resumeInfo,
              companyEmploy: {
                jobId: row.jobId,
                resumeId: row.resumeId,
                studentId: row.studentId,
                companyId: row.companyId,
              },
            },
          });
        });
      }
    },
    // 每页显示多少条
    handleSizeChange(val) {
      this.pageSize = val;
      this.getMenuTree();
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getMenuTree();
    },

    // 查询公司录用类别信息
    getCompanyEmployList() {
      let params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        condition: this.condition || {},
      };
      reqGetCompanyEmployList(params).then((res) => {
        this.loading = false;
        this.companyEmployList = res.data.companyEmployRecordIPage.records;
        if (res.data.companyEmployRecordIPage.currentPage) {
          this.currentPage = res.data.companyEmployRecordIPage.currentPage;
        }
        if (this.companyEmployRecordIPage.pageSize) {
          this.pageSize = res.data.companyEmployRecordIPage.pageSize;
        }
        if (this.companyEmployRecordIPage.total) {
          this.total = res.data.companyEmployRecordIPage.total;
        }
      });
    },
    // 删除公司录用类别
    handDel(row) {
      let result;
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
        .then(async () => {
          let result = await reqBatchDelCompanyEmploy([row.id]);
          this.$message({
            message: result.message,
            type: 'success',
            duration: 2 * 1000,
          });
          this.getCompanyEmployList();
        })
        .catch(() => {
          this.$message({
            message: '取消删除',
            type: 'info',
            duration: 2 * 1000,
          });
        });
    },
    // 刷新公司录用列表
    refresh: throttle(async function () {
      this.loading = true;
      this.currentPage = 1;
      await this.getCompanyEmployList();
      this.$message({
        message: '刷新成功',
        type: 'success',
        duration: 1 * 1000,
      });
    }, 800),

    // 条件查询
    async queryByCondition() {
      // 起始创建日期
      let createTimeStart = undefined;
      // 截止创建日期
      let createTimeEnd = undefined;
      if (this.queryParam.createTime) {
        if (this.queryParam.createTime[0]) {
          createTimeStart = this.queryParam.createTime[0];
        }
        if (this.queryParam.createTime[1]) {
          createTimeEnd = this.queryParam.createTime[1];
        }
      }

      // 起始创建日期
      let employTimeStart = undefined;
      // 截止创建日期
      let employTimeEnd = undefined;
      if (this.queryParam.employTime) {
        if (this.queryParam.employTime[0]) {
          employTimeStart = this.queryParam.employTime[0];
        }
        if (this.queryParam.employTime[1]) {
          employTimeEnd = this.queryParam.employTime[1];
        }
      }
      // 初始化条件查询参数
      this.condition = {
        createTimeEnd,
        createTimeStart,
        employTimeStart,
        employTimeEnd,
      };
      this.getCompanyEmployList();
      this.$message.success('查询成功!', 1500);
    },
  },
};
</script>

<style lang="scss" scoped>
// 分页插件居中对齐
.block {
  text-align: center;
}

// 公司录用标题样式
.span-a:hover {
  text-decoration-line: underline;
  color: cornflowerblue;
  cursor: pointer;
}

// 折叠满样式 -- 搜索栏
.accordion {
  text-align: center;
  div {
    margin-bottom: 20px;
  }
  .queryBtn {
    // text-align: center;
  }
}
</style>
